<template lang="pug">
  .clearfix
    Modal(
      width="480"
      v-model="isShowUploadAccessoryModal"
      title="附件上传"
      class-name="vertical-center-modal"
      @on-cancel="cancel"
      @on-ok="handleSubmit"
    )
      .search-form
        Row
          Col.mb-10(span="24")
            span.label-txt.w80 附件类型
            Select(v-model="categoryType" placeholder="请选择" clearable label-in-value @on-change="handleCategoryType")
              Option(v-for="(item, index) of formEnclosureItem" :key="index" :value="item.prop") {{item.label}}
          Col.mb-10(span="24")
            span.label-txt.w80 选择文件
            Upload(
              :before-upload="handleBeforeUpload"
              :on-success="handleUploadSuccess"
              ref="upload"
              :max-size="10 * 1024"
              :on-exceeded-size="handleMaxSizeTen"
              :data="params"
              :show-upload-list="false"
              accept=".doc, .docx, .xls, .xlsx"
              :action="'/api/Employee/' + employeeId + '/Upload'"
              :headers="headers"
            )
              Button.download-btn.mt-5(size="small" :disabled="categoryType ? false : true") 上传
            //- Upload(@before="handleBeforeUpload" @upload="handleUploadSuccess" :employeeId="employeeId" :params="params" :row="categoryType" :isCanUpload="categoryType!== '' ? true : false")
          Col.mb-10.pl-80(span="24")
            .text-gray-9 仅支持上传10M以内的doc、xlsx文件
          Col.mb-10.pl-80(span="24")
            //- Tag(:name="c_item.name" :closable="true" @on-close="handleCloseTag(c_index, c_item.id)") {{c_item.name}}
            Tag(v-if="file") {{file.name}}

      //- .clearfix(slot="footer")
      //-   Button(type="text" @click="cancel") 取消
      //-   Button(type="primary" @click="handleSubmit") 确定
</template>

<script>
import { EmployeesApi } from '@/api/Employees.api.js'
import { Common } from '@/utils/common.js'
import Cookies from 'js-cookie'
// import Upload from '@/components/upload/upload'
// import UploadZip from '@/components/upload/uploadZip'
export default {
  name: '',

  props: {
  },

  components: {
    // Upload,
    // UploadZip
  },

  data () {
    return {
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      employeeId: '',
      isShowUploadAccessoryModal: false,
      categoryType: null,
      formEnclosure: {
        laodonghetong: '',
        yuangongshouce: '',
        ruzhidangan: '',
        peixunqiandao: '',
        qitaziliao: '',
        // yuangongzhaopian: '',
        lizhizhengming: ''
      },
      formEnclosureItem: [
        { type: 'file', label: '劳动合同', placeholder: '请上传劳动合同', prop: 'laodonghetong', model: 'laodonghetong', style: 'ivu-col-span-24', files: [] },
        { type: 'file', label: '员工手册', placeholder: '请上传员工手册', prop: 'yuangongshouce', model: 'yuangongshouce', style: 'ivu-col-span-24', files: [] },
        { type: 'file', label: '入职档案', placeholder: '请上传入职档案', prop: 'ruzhidangan', model: 'ruzhidangan', style: 'ivu-col-span-24', files: [] },
        { type: 'file', label: '培训签到表', placeholder: '请上传培训签到表', prop: 'peixunqiandao', model: 'peixunqiandao', style: 'ivu-col-span-24', files: [] },
        { type: 'file', label: '其他资料', placeholder: '请上传其他资料', prop: 'qitaziliao', model: 'qitaziliao', style: 'ivu-col-span-24', files: [] },
        // {type: 'file', label: '员工照片', placeholder: '请上传员工照片', prop: 'yuangongzhaopian', model: 'yuangongzhaopian', style: 'ivu-col-span-24', files: []},
        { type: 'file', label: '离职证明', placeholder: '请上传离职证明', prop: 'lizhizhengming', model: 'lizhizhengming', style: 'ivu-col-span-24', files: [] }
      ],
      params: {
        ID: '',
        rowVersion: '',
        categoryname: '',
        Atta: ''
      },
      file: null
      // accessoryArr: []
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    // 删除标签
    async handleCloseTag (c_index, id) {
      let res = await EmployeesApi.deleteEmpAtta({ attaid: id })
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        // this.accessoryArr.splice(c_index, 1) // 本地数组删除
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // handleBeforeUpload (row) {
    //   this.params.categoryname = this.formEnclosureItem[row].model
    // },

    // // 上传图片
    // handleUploadSuccess (res, row) {
    //   if (res.code === 200 && res.success) {
    //     this.$Message.success(res.message)
    //     this.accessoryArr.push(res.data)
    //   } else {
    //     .message)
    //     this.$Message.error({
    //       content: res.message,
    //       // duration: 0,
    //       closable: true
    //     })
    //   }
    // }

    // 附件类型下拉改变
    handleCategoryType (value) {
      if (value) {
        console.log('附件类型下拉改变: ', value)
        this.params.categoryname = value.value
      }
    },

    // 上传前文件
    handleBeforeUpload (file) {
      // this.params.categoryname = this.formEnclosureItem[row].model
      this.file = file
      console.log('file: ', file)
      return false
    },

    // 上传成功
    handleUploadSuccess (res, row) {
      console.log('上传成功res: ', res)
      console.log('上传成功row: ', row)
      if (res.code === 200 && res.success) {
        this.$Message.success(res.message)
        // this.accessoryArr.push(res.data)
        this.isShowUploadAccessoryModal = false
      } else {
        this.$Message.error({
          content: res.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 取消附件上传
    cancel () {
      console.log('取消附件上传')
      this.file = null // 之前上传的文件清除
      this.categoryType = null // 每次显示此弹窗时，之前的下拉选项置空
      this.isShowUploadAccessoryModal = false
      // this.accessoryArr = []
    },

    // 确定导入
    handleSubmit () {
      if (this.file) {
        console.log('this.$refs.upload: ', this.$refs.upload)
        this.$refs.upload.post(this.file)
        this.file = null
      } else {
        this.$Message.warning('请选择文件！')
      }
    },

    handleShowUploadAccessoryModal (id) {
      console.log('显示弹窗')
      this.file = null // 之前上传的文件清除
      this.categoryType = null // 每次显示此弹窗时，之前的下拉选项置空
      // this.accessoryArr = [] // 每次显示此弹窗时，之前上传的附件数组置空
      this.employeeId = id
      this.isShowUploadAccessoryModal = true
    },

    handleMaxSizeTen () {
      this.$emit('handleMaxSizeTen')
    }
  }
}
</script>

<style lang="less" scope>
</style>
